<template>
    <div class="container yuan-container see-doctor" :key="'seeDoctor_'+renderKey">

        <div class="page-left">
            <SeeDoctor1 />
        </div>
        <div class="page-right">
            <SeeDoctor2 />
            <SeeDoctor3 />
        </div>

    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import SeeDoctor1 from "./seeDoctor1.vue";
import SeeDoctor2 from "./seeDoctor2.vue";
import SeeDoctor3 from "./seeDoctor3.vue";
@Component({
    name: "tpl",
    components: { SeeDoctor1, SeeDoctor2, SeeDoctor3 },
})
export default class extends Vue {
    loading = false;

    async mounted() {
        window.addEventListener("resize", this.handleResize);
    }
    renderKey = 1;
    resizeTimer: number | null = null;
    handleResize() {
        // 添加防抖处理（300ms
        if (this.resizeTimer) {
            clearTimeout(this.resizeTimer);
        }

        this.resizeTimer = setTimeout(() => {
            this.renderKey++;
        }, 300);
    }
    beforeDestroy() {
        window.removeEventListener("resize", this.handleResize);
    }
}
</script>
<style lang="scss">
.see-doctor {
    height: calc(100% - 40px);
    .page-left {
        width: 60%;
        height: 100%;
        display: inline-block;
        vertical-align: top;
    }
    .page-right {
        width: 39%;
        height: 100%;
        margin-left: 1%;
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .page-child-main {
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
    }
    .page-title {
        font-weight: bold;
        font-size: 16px;
        color: #4469f1;
    }
}
</style>
